<template>
  <view :style="themeColor">
    <view class="page">
      <view class="flex benben-position-layout flex flex-wrap align-center myProfile_flex_0"
        :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
        <view class='flex flex-wrap align-center justify-between flex-sub myProfile_fd0_0'>
          <view class='flex flex-wrap align-center myProfile_fd0_0_c0' @tap.stop="handleJumpDiy" data-type="back"
            data-url="1">
            <text class='fu-iconfont2  myProfile_fd0_0_c0_c0'>&#xE794;</text>
          </view>
          <view class='flex flex-wrap align-stretch justify-center'>
            <text class='myProfile_fd0_0_c1_c0'>我的资料</text>
          </view>
          <view class='flex flex-wrap align-center justify-end myProfile_fd0_0_c0'>
          </view>
        </view>

      </view>
      <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
      <!---flex布局flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout">
        <view class='flex flex-wrap align-center justify-between myProfile_fd1_0'>
          <text class='myProfile_fd1_0_c0'>头像</text>
          <view class='flex flex-wrap align-center'>
            <view class="upload position-relative">

              <image class=" myProfile_fd1_0_c1_c0_image" mode="aspectFill"
                @tap="croppingUploadImage('avatar','avatar',dataInfo,dataInfo)"
                :src="dataInfo.avatar ? dataInfo.avatar : STATIC_URL+'38.png'"></image>
            </view>
            <image class='myProfile_fd1_0_c1_c1' mode="aspectFill" :src='STATIC_URL+"73.png"'></image>
          </view>
        </view>
        <view class='flex flex-wrap align-center justify-between myProfile_fd1_0' @tap.stop="handleJumpDiy"
          data-type="navigateTo" :data-url="`/pages/wode/changeData/changeData?state=1&nickname=${dataInfo.nickname}`">
          <text class='myProfile_fd1_0_c0'>昵称</text>
          <view class='flex flex-wrap align-center'>
            <text class='myProfile_fd1_0_c0'>{{dataInfo.nickname}}</text>
            <image class='myProfile_fd1_0_c1_c1' mode="aspectFit" :src='STATIC_URL+"73.png"'></image>
          </view>
        </view>
        <view class='flex flex-wrap align-center justify-between myProfile_fd1_0'
          @tap.stop="pickerDiy1704874099380=true">
          <text class='myProfile_fd1_0_c0'>性别</text>
          <view class='flex flex-wrap align-center'>
            <benben-input class='myProfile_fd1_2_c1_c0' type="text" :placeholder="`选择性别`" confirm-type="done"
              :maxlength="-1" :disabled='true' placeholder-style="color:rgba(153, 153, 153, 1);font-size:28rpx"
              v-model="gender" />
            <image class='myProfile_fd1_0_c1_c1' mode="aspectFit" :src='STATIC_URL+"73.png"'></image>
          </view>
        </view>
        <view class='flex flex-wrap align-center justify-between myProfile_fd1_0'
          @tap.stop="pickerDiy1704874166629=true">
          <text class='myProfile_fd1_0_c0'>生日</text>
          <view class='flex flex-wrap align-center'>
            <benben-input class='myProfile_fd1_2_c1_c0' type="text" :placeholder="`选择生日`" confirm-type="done"
              :maxlength="-1" :disabled='true' placeholder-style="color:rgba(153, 153, 153, 1);font-size:28rpx"
              v-model="dataInfo.birthday" />
            <image class='myProfile_fd1_0_c1_c1' mode="aspectFit" :src='STATIC_URL+"73.png"'></image>
          </view>
        </view>
        <view class='flex flex-wrap align-center justify-between myProfile_fd1_0' @tap.stop="handleJumpDiy"
          data-type="navigateTo" :data-url="`/pages/wode/changeData/changeData?state=2&jianjie=${dataInfo.jianjie}`">
          <text class='myProfile_fd1_0_c0'>个人简介</text>
          <view class='flex flex-wrap align-center flex-sub'>
            <benben-input class='flex-sub myProfile_fd1_2_c1_c0' type="text" :placeholder="`有趣的简介可以吸引粉丝`"
              confirm-type="done" :maxlength="-1" :disabled='true'
              placeholder-style="color:rgba(153, 153, 153, 1);font-size:28rpx" v-model="dataInfo.jianjie" />
            <image class='myProfile_fd1_0_c1_c1' mode="aspectFit" :src='STATIC_URL+"73.png"'></image>
          </view>
        </view>
        <view class='flex flex-wrap align-center justify-between myProfile_fd1_0' @tap.stop="gotoSchool">
          <text class='myProfile_fd1_5_c0'>学校</text>
          <text class='myProfile_fd1_5_c1' v-if=" dataInfo.is_school==0">未验证</text>
          <view class='flex flex-wrap align-center flex-sub'>
            <view class='flex-sub myProfile_fd1_2_c1_c0'>
              {{ dataInfo.is_school==0 ?'选择学校' : dataInfo.school_info.school_name}}
            </view>
            <!-- benben-input class='flex-sub myProfile_fd1_2_c1_c0' type="text" :placeholder="`选择学校`"
              confirm-type="done" :maxlength="-1" :disabled='true'
              placeholder-style="color:rgba(153, 153, 153, 1);font-size:28rpx" / -->
            <image class='myProfile_fd1_0_c1_c1' mode="aspectFit" :src='STATIC_URL+"73.png"'></image>
          </view>
        </view>
        <view class='flex flex-direction flex-wrap align-stretch myProfile_fd1_0' @tap.stop="handleJumpDiy"
          data-type="navigateTo"
          :data-url="`/pages/wode/InterestsPage/InterestsPage?hobby_id=${dataInfo.userlable_id}`">
          <view class='flex flex-wrap align-center justify-between'>
            <text class='myProfile_fd1_0_c0'>兴趣爱好</text>
            <image class='myProfile_fd1_0_c1_c1' mode="aspectFit" :src='STATIC_URL+"73.png"'></image>
          </view>
          <view class='flex flex-wrap align-center'>
            <template v-for='(item,key0) in user_label'>
              <view class='flex flex-wrap align-center myProfile_fd1_6_c1_c0' :key='key0'>
                <text class='myProfile_fd1_0_c0'>{{item}}</text>
              </view>
            </template>

          </view>
        </view>
      </view>

      <!---flex布局flex布局结束-->
      <!--选择性别开始 -->
      <benben-picker ref="benbenWritePickerCodepicker2" :visible.sync="pickerDiy1704874099380" :label.sync='gender'
        :value.sync='dataInfo.gender' :options='ganderType' mode='selector' :mask-show='true' :timeout='true'
        :picker-height='88' default-type='value' :default-props='{"label":"name","value":"value"}'>
        <template #picker-header>
          <view class='flex flex-wrap align-center justify-between myProfile_picker2_0'>
            <text class='myProfile_picker2_0_c0' @tap="$refs.benbenWritePickerCodepicker2.cancel()">取消</text>
            <text>选择性别</text>
            <text class='myProfile_picker2_0_c2' @tap="$refs.benbenWritePickerCodepicker2.pickerConfirm()">确认</text>
          </view>
        </template>
      </benben-picker>
      <!--选择性别结束 -->
      <!---flex布局flex布局开始-->
      <view class="flex benben-flex-layout flex-wrap align-center myProfile_flex_3" @click="submit">
        <button class='myProfile_fd3_0'>保存</button>
      </view>

      <!---flex布局flex布局结束-->
      <!--选择时间开始 -->
      <benben-picker ref="benbenWritePickerCodepicker4" :visible.sync="pickerDiy1704874166629" mode='date'
        :picker-height='88' :current='true' :mask-show='true' fields='day' :timeout='true' start-year='1990-01-01'
        end-year='2050-12-31' from-data='' :value.sync='dataInfo.birthday'>
        <template #picker-header>
          <view class='flex flex-wrap align-center justify-between myProfile_picker4_0'>
            <text class='myProfile_picker4_0_c0' @tap="$refs.benbenWritePickerCodepicker4.cancel()">取消</text>
            <text>选择时间</text>
            <text class='myProfile_picker4_0_c2' @tap="$refs.benbenWritePickerCodepicker4.pickerConfirm()">确认</text>
          </view>
        </template>
      </benben-picker>
      <!--选择时间结束 -->


    </view>
  </view>
</template>
<script>
  import UploadImage from '@/common/utils/upload-image.js'
  import {
    validate
  } from '@/common/utils/validate.js'
  import {
    TUIChatKit,
    genTestUserSig
  } from "@/TUIKit";
  import {
    SYSTEM_CONFIG,
    SDKAppID,
    secretKey
  } from "@/common/config.js";
  import {
    vueVersion
  } from "@/TUIKit/adapter-vue";
  import {
    TUILogin
  } from "@tencentcloud/tui-core";
  export default {
    components: {},


    data() {
      return {
        "pickerDiy1704874166629": false,
        "pickerDiy1704874099380": false,
        "ganderType": [{
          "name": "男",
          "value": "1",
          "image": ""
        }, {
          "name": "女",
          "value": "2",
          "image": ""
        }, {
          "name": "保密",
          "value": "3",
          "image": ""
        }],
        "gender_id": "",
        "gender": "",
        "dataInfo": {
          "invite_code": "",
          "address": "",
          "address_code": "",
          "hobby": "",
          "tags": "",
          "id": "",
          "userlevel_id": "",
          "mobile": "",
          "real_name": "",
          "avatar": "",
          "account": "",
          "email": "",
          "birthday": "",
          "gender": "",
          "create_time": "",
          "user_money": "",
          "freeze_money": "",
          "total_consumption_money": "",
          "score": "",
          "_mobile": "",
          "coupon": "",
          "collection_count": "",
          "browse_count": "",
          "total_money": "",
          "certified": "",
          "nickname": "",
          "is_pay_password": "",
          "follow_count": "",
          "is_close": "",
          "exp": "",
          "area_code": "",
          "jianjie": "",
          "level_name": "",
          "next_need_exp": "",
          "support_num": "",
          "follow_num": "",
          "fans_num": "",
          "user_label": [],
          "is_school": ""
        },
        "data": {
          "userinfo": {
            "id": "",
            "avatar": "",
            "real_name": "",
            "nickname": "",
            "email": "",
            "gender": "",
            "mobile": "",
            "birthday": "",
            "client_id": "",
            "phone": ""
          }
        },
        user_label: []
      };
    },
    computed: {
      themeColor() {
        return this.$store.getters.themeColor
      },

    },
    watch: {},
    onLoad(options) {
      this.getDaraFunc()
    },
    onUnload() {

    },
    onReady() {

    },
    onShow() {
      this.getuser_label()
      uni.$on('nickname', data => {
        console.log(data)
        this.dataInfo.nickname = data
      })
      uni.$on('jianjie', data => {
        console.log('datadatadatadatadata', data)
        this.dataInfo.jianjie = data
      })
    },
    onHide() {

    },
    onResize() {

    },
    onPullDownRefresh() {

    },
    onReachBottom(e) {

    },
    onPageScroll(e) {

    },
    methods: {
      gotoSchool() {
        uni.redirectTo({
          url: `/pages/dlzc/addSchool/addSchool?aid=${this.dataInfo.school_info.aid}`
        })
      },
      //裁剪图片上传
      croppingUploadImage(id, path, obj, obj1, fnName = false) {
        let self = this
        if (!obj) obj = this
        if (!obj1) obj1 = this
        let itemList = obj1[path] ? ['修改头像', '拍照', '从手机相册选择'] : ['拍照', '从手机相册选择']

        function imageCroppingCuccess() {
          uni.$once('image-cropping-success', (file) => {
            if (!file) return
            new UploadImage([file], {
              complete: (res) => {
                self.dataInfo.avatar = res[0].path
                if (id) self.$set(obj, id, res[0].id)
                if (path) self.$set(obj1, path, res[0].path)
                if (fnName) self[fnName]()
              },
            })
          })
        }
        uni.showActionSheet({
          itemList: itemList,
          success: function(res) {
            if (res.tapIndex == 0 && obj1[path]) {
              uni.navigateTo({
                url: '/pages/benben-built-in/image-cropping/image-cropping?rectHeight=200&rectWidth=200&&myImgUrl=' +
                  obj1[path],
                animationDuration: 0,
              })
              imageCroppingCuccess()
            }
            if ((res.tapIndex == 1 && obj1[path]) || (res.tapIndex == 0 && !obj1[path])) {
              uni.chooseImage({
                count: 1,
                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有
                success: (res) => {
                  // 跳转到图片裁切页面
                  uni.navigateTo({
                    url: `/pages/benben-built-in/image-cropping/image-cropping?rectHeight=200&rectWidth=200&fileType=${res.tempFiles[0].type}&myImgUrl=${res.tempFilePaths[0]}`,
                    animationDuration: 0,
                  })
                  imageCroppingCuccess()
                },
              })
            }
            if ((res.tapIndex == 2 && obj1[path]) || (res.tapIndex == 1 && !obj1[path])) {
              uni.chooseImage({
                count: 1,
                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album'], // 可以指定来源是相册还是相机，默认二者都有
                success: (res) => {
                  // 跳转到图片裁切页面
                  uni.navigateTo({
                    url: `/pages/benben-built-in/image-cropping/image-cropping?rectHeight=200&rectWidth=200&fileType=${res.tempFiles[0].type}&myImgUrl=${res.tempFilePaths[0]}`,
                    animationDuration: 0,
                  })
                  imageCroppingCuccess()
                },
              })
            }
          },
          fail: function(res) {
            console.log(res.errMsg)
          },
        })
      },
      async submit() {
        // if (this.$util.antiShakeThrottle()) return
        if (!validate(this.dataInfo.avatar, 'require')) {
          this.$message.info('用户头像不能为空');
          return false;
        }
        if (!validate(this.dataInfo.nickname, 'require')) {
          this.$message.info('用户昵称不能为空');
          return false;
        }
        if (!validate(this.dataInfo.gender, 'require')) {
          this.$message.info('用户性别不能为空');
          return false;
        }
        if (!validate(this.dataInfo.birthday, 'require')) {
          this.$message.info('用户出生日期不能为空');
          return false;
        }
        // if (!validate(this.dataInfo.jianjie, 'require')) {
        //   this.$message.info('个人简介不能为空');
        //   return false;
        // }
        //请求方法
        //数据验证

        let datadata = await this.$api.post(global.apiUrls.post5cb54af125f1c, {
          avatar: this.dataInfo.avatar,
          nickname: this.dataInfo.nickname,
          gender: this.dataInfo.gender,
          birthday: this.dataInfo.birthday,
          jianjie: this.dataInfo.jianjie
        });

        if (datadata.data.code != 1) {
          this.$message.info(datadata.data.msg);
          return
        }
        let infodata = datadata.data;
        this.data = infodata.data
        // TUILogin.chat
        TUILogin.chat.updateMyProfile({
          nick: this.data.userinfo.nickname,
          avatar: this.data.userinfo.avatar,
        }).then(() => {
          console.log('gengxin 成功')
        })
        uni.showToast({
          title: '修改成功',
          mask: true,
          icon: 'none',
          duration: 1500
        });
        setTimeout(() => {
          this.$urouter.navigateBack(1);
        }, 500)
      },
      async getuser_label() {
        let datadataInfo = await this.$api.get(global.apiUrls.post5c78c4772da97, {

        });

        if (datadataInfo.data.code != 1) {
          this.$message.info(datadataInfo.data.msg);
          return
        }
        let infodataInfo = datadataInfo.data;
        this.user_label = infodataInfo.data.user_label

      },
      //获取会员信息
      async getDaraFunc() {
        //请求方法
        //数据验证

        let datadataInfo = await this.$api.get(global.apiUrls.post5c78c4772da97, {

        });

        if (datadataInfo.data.code != 1) {
          this.$message.info(datadataInfo.data.msg);
          return
        }
        let infodataInfo = datadataInfo.data;
        this.dataInfo = infodataInfo.data

        if (this.dataInfo.gender == '1') {
          this.gender = '男';
        } else if (this.dataInfo.gender == '2') {
          this.gender = '女';
        }
      }
    }
  };
</script>
<style lang="scss" scoped>
  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: rgba(255, 255, 255, 1);
    background-size: 100% auto;
  }

  .myProfile_flex_0 {
    background: #fff;
    width: 750rpx;
    height: 88rpx;
    overflow: hidden;
    z-index: 10;
    top: 0rpx;
    background-size: 100% auto !important;
  }

  .myProfile_fd0_0_c1_c0 {
    font-size: 36rpx;
    font-weight: 700;
    color: #333333;
    line-height: 50rpx;
  }

  .myProfile_fd0_0_c0_c0 {
    font-size: 36rpx;
    color: #333;
  }

  .myProfile_fd0_0_c0 {
    width: 120rpx;
  }

  .myProfile_fd0_0 {
    padding: 0rpx 32rpx 0rpx 32rpx;
  }

  .myProfile_fd1_6_c1_c0 {
    background: rgba(248, 248, 248, 1);
    padding: 12rpx 32rpx 12rpx 32rpx;
    border-radius: 12rpx;
    background-size: 100% auto;
    margin: 20rpx 16rpx 0rpx 0rpx;
  }

  .myProfile_fd1_5_c1 {
    background: rgba(58, 134, 254, 0.1);
    color: #3A86FE;
    font-size: 22rpx;
    font-weight: 400;
    line-height: 22rpx;
    padding: 5rpx 8rpx 5rpx 8rpx;
    border-radius: 4rpx;
    background-size: 100% auto;
  }

  .myProfile_fd1_5_c0 {
    color: #333333;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 32rpx;
    margin: 0rpx 10rpx 0rpx 0rpx;
  }

  .myProfile_fd1_2_c1_c0 {
    text-align: right;
    color: rgba(51, 51, 51, 1);
    font-size: 28rpx;
  }

  .myProfile_fd1_0_c1_c1 {
    width: 40rpx;
    height: 40rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    margin: 0rpx 0rpx 0rpx 8rpx;
  }

  .myProfile_fd1_0_c1_c0_image {
    width: 80rpx;
    height: 80rpx;
    border-radius: 100rpx;
  }

  .myProfile_fd1_0_c0 {
    color: #333333;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 32rpx;
  }

  .myProfile_fd1_0 {
    border-bottom: 1px solid #eee;
    margin: 0rpx 32rpx 0rpx 32rpx;
    padding: 32rpx 0rpx 32rpx 0rpx;
  }

  .myProfile_picker2_0_c2 {
    color: rgba(100, 80, 235, 1);
  }

  .myProfile_picker2_0_c0 {
    color: var(--benbenFontColor2);
  }

  .myProfile_picker2_0 {
    border-bottom: 1px solid #eee;
    background: #fff;
    padding: 0rpx 32rpx 0rpx 32rpx;
    line-height: 88rpx;
    border-radius: 25rpx 25rpx 0rpx 0rpx;
    background-size: 100% auto !important;
  }

  .myProfile_flex_3 {
    position: fixed;
    left: 32rpx;
    bottom: calc(48rpx + var(--window-bottom));
  }

  .myProfile_fd3_0 {
    background: rgba(100, 80, 235, 1);
    border-radius: 50rpx;
    width: 686rpx;
    line-height: 88rpx;
    font-size: 32rpx;
    color: #fff;
  }

  .myProfile_picker4_0_c2 {
    color: rgba(100, 80, 235, 1);
  }

  .myProfile_picker4_0_c0 {
    color: var(--benbenFontColor2);
  }

  .myProfile_picker4_0 {
    border-bottom: 1px solid #eee;
    background: #fff;
    padding: 0rpx 32rpx 0rpx 32rpx;
    line-height: 88rpx;
    border-radius: 25rpx 25rpx 0rpx 0rpx;
    background-size: 100% auto !important;
  }
</style>
